<style>
  #YY-notice{
    padding-top: 20px;
    background-color: #efefef;
  }
  #YY-notice .print-btn{
    min-width: 100px;
  }
  #YY-notice .delete-btn.disabled{
    border:1px solid #999;
    color:#999;
    background-color: transparent;
    margin-right: 10px;
  }
</style>

<section id="YY-reminder" style="font-family: '宋体'">
  <div class="JYpt-container">
    <div class="clearfix">
      <div class="pull-left jypt-head">
        <span class="sk">收款账号：</span>
        <div class="select-ul pt-select">
            <span class="select-name br-4 box-i-shadow">{{projectData.bankAccounts ? projectData.bankAccounts[0] : '请选择账号'}}</span>
            <ul v-if="projectData.bankAccounts">
              <li v-for="(item, index) in projectData.bankAccounts" @click="linkBank(index)">{{item}}</li>
            </ul>
        </div>
      </div>
      <button class="print-btn pull-right btn n-btn-primary js-print">打印</button>
      <button class="print-btn pull-right btn n-btn-outline export-pdf mr-10">导出PDF</button>
      <button class="print-btn pull-right btn n-btn-outline mr-10 js-add-bill">添加账项</button>
      <button class="print-btn pull-right btn n-btn-outline delete-btn mr-10 js-del-bill" :class="{disabled:addExpenses.length === 0}">删除账项</button>
    </div>

    <!-- //content -->
    <div class="pt-wrap">
      <div class="jy-wrap-head clearfix">
        <div style="overflow:hidden;">
          <img src="http://s.1hello.cn/wbuild-saas-pc/assets/images/YYlogo.png" style="float:left;text-align:left; height:55px;" />
          <div style="float:left;text-align:center; font-size:18px;font-family: '宋体';width:360px;font-weight:bolder;margin-top:20px;color:#000;">{{projectData.companyName ? projectData.companyName : '--'}}</div>
        </div>
        <div style="margin-bottom:10px;color:#666;font-size:14px;text-align:center;">催缴单</div>
        <table border="0" cellpadding="0" cellspacing="0" width='100%' style="color:#000;">
          <tr>
            <td style="text-align:left; font-size:12px; line-height:24px !important;font-family: '宋体';width:488px;">
              <span style="width:60px;display:inline-block;">致：</span>{{contractData.zlfCompany ? contractData.zlfCompany : '--'}}
            </td>
            <td style="text-align:right; font-size:12px; line-height:24px !important;font-family: '宋体';">
              <span style="width:90px;display:inline-block;">合同号：</span>{{contractData.mCode ? contractData.mCode : '--'}}
            </td>
          </tr>
          <tr>
            <td style="text-align:left; font-size:12px; line-height:24px !important;font-family: '宋体';width:488px;">
              <span style="width:60px;display:inline-block;">To：</span>
            </td>
            <td style="text-align:right; font-size:12px; line-height:24px !important;font-family: '宋体';">
              <span style="width:90px;display:inline-block;">Contract No：</span>{{contractData.mCode ? contractData.mCode : '--'}}
            </td>
          </tr>
          <tr>
            <td style="text-align:left; font-size:12px; line-height:24px !important;font-family: '宋体';width:488px;">
              <span style="width:60px;display:inline-block;">租户名称：</span>{{contractData.zlfCompany ? contractData.zlfCompany : '--'}}
            </td>
            <td style="text-align:right; font-size:12px; line-height:24px !important;font-family: '宋体';">
              <span style="width:90px;display:inline-block;">结算单号：</span>{{billNo}}
            </td>
          </tr>
          <tr>
            <td style="text-align:left; font-size:12px; line-height:24px !important;font-family: '宋体';width:488px;">
              <div style="width:60px;display:inline-block;">Name：</div>
            </td>
            <td style="text-align:right; font-size:12px; line-height:24px !important;font-family: '宋体';">
              <div style="width:90px;display:inline-block;">Settl No：</div>{{billNo}}
            </td>
          </tr>
          <tr>
            <td style="text-align:left; font-size:12px; line-height:24px !important;" class="infos">
              <p style="float:left;font-family: '宋体';width:60px;">单元号：</p>
              <span class="dy" style="float:left;">
                <b style="line-height:24px !important; font-size:12px;font-family: '宋体';" v-for="item in contractData.units">{{item.projectName}}-{{item.buildingName}} {{item.floorName || '--'}} {{item.unitName}} {{item.positionName}}<br/></b>
              </span>
            </td>
            <td style="text-align:right; font-size:12px; line-height:24px !important;font-family: '宋体';">
              <div style="width:90px;display:inline-block;">最迟缴费日期：</div>{{deadTimeDate}}
            </td>
          </tr>
          <tr>
            <td style="text-align:left; font-size:12px; line-height:24px !important;font-family: '宋体';width:488px;">
              <p style="float:left;font-family: '宋体';width:60px;">Unit：</p>
              <span class="dy" style="float:left;">
                <!-- <b style="line-height:24px !important; font-size:12px;font-family: '宋体';" v-for="item in contractData.units"><br/></b> -->
              </span>
            </td>
            <td style="text-align:right; font-size:12px; line-height:24px !important;font-family: '宋体';">
              <div style="width:90px;display:inline-block;">打印日期：</div>{{curDate}}
            </td>
          </tr>
          <tr>
            <td style="text-align:left; font-size:12px; line-height:24px !important;font-family: '宋体';width:488px;"></td>
            <td style="text-align:right; font-size:12px; line-height:24px !important;font-family: '宋体';">
              <div style="width:90px;display:inline-block;">制单人：</div>{{user}}
            </td>
          </tr>
        </table>
      </div>

      <div class="jy-wrap-content" style="margin:0;">
        <div style="font-size:12px;color:#000;font-family: '宋体'; margin:20px 0; line-height:24px;">一、商户应缴费用合计：</div>
        <div class="jy-table">
          <table cellpadding="0" cellspacing="0" width='100%' style="border:2px solid #333;font-size:12px;color:#000;">
            <tr>
              <th style="border:1px solid #333;font-family: '宋体';width: 112px;">
                <div style="line-height:26px;">账项说明</div>
                <div style="line-height:26px;">Descriotion</div>
              </th>
              <th style="border:1px solid #333;font-family: '宋体';width: 78px;">
                <div style="line-height:26px;">开始期间</div>
                <div style="line-height:26px;">Period Start</div>
              </th>
              <th style="border:1px solid #333;font-family: '宋体';width: 74px;">
                <div style="line-height:26px;">截止期间</div>
                <div style="line-height:26px;">Period End</div>
              </th>
              <th style="border:1px solid #333;font-family: '宋体';width: 70px;">
                <div style="line-height:26px;">货币</div>
                <div style="line-height:26px;">Currency</div>
              </th>
              <th style="border:1px solid #333;font-family: '宋体';width: 70px;">
                <div style="line-height:26px;">金额</div>
                <div style="line-height:26px;">Amount</div>
              </th>
              <th style="border:1px solid #333;font-family: '宋体';width: 74px;">
                <div style="line-height:26px;">未付金额</div>
                <div style="line-height:26px;">Pay Amount</div>
              </th>
              <th style="border:1px solid #333;font-family: '宋体';width: 70px;">
                <div style="line-height:26px;">滞纳金</div>
                <div style="line-height:26px;">Surcharge</div>
              </th>
              <th style="border:1px solid #333;font-family: '宋体';width: 80px;">
                <div style="line-height:26px;">总金额</div>
                <div style="line-height:26px;">Total</div>
              </th>
              <th style="border:1px solid #333;font-family: '宋体';width: 86px;">
                <div style="line-height:26px;">备注</div>
                <div style="line-height:26px;">Comment</div>
              </th>
            </tr>
            <!-- 自带的账单项目-->
            <tr v-for="item in expenses" style="background-color:#f2f2f2;" :id="item.id">
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 112px;height:34px;font-weight:bolder;">{{item.name}}</td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 74px;height:34px;">{{item.beginDate | formatDate}}</td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 74px;height:34px;">{{item.endDate | formatDate}}</td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 70px;height:34px;">{{item.currency}}</td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 65px;height:34px;text-align:right; padding-right:5px !important;">{{item.amount}}</td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 69px;height:34px;text-align:right; padding-right:5px !important;">{{item.payAmount}}</td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 65px;height:34px;text-align:right; padding-right:5px !important;">{{item.surcharge}}</td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 75px;height:34px;text-align:right; padding-right:5px !important;">{{item.total}}</td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 86px;height:34px;">{{item.memo || '--'}}</td>
            </tr>
            <!-- 添加的账单项目-->
            <tr style="background-color:#f2f2f2;" v-for="(item,index) in addExpenses">
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 112px;height:34px;font-weight:bolder;">
                <input type="text" style="width:110px;" v-model="item.name" class="text-center">
              </td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 74px;height:34px;">
                <input type="text" style="width:72px;" v-model="item.beginDate" class="text-center">
              </td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 74px;height:34px;">
                <input type="text" style="width:72px;" v-model="item.endDate" class="text-center">
              </td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 70px;height:34px;">
                <input type="text" style="width:68px;" v-model="item.currency" class="text-center">
              </td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 70px;height:34px;text-align:right;">
                <input type="text" style="width:68px;text-align:right;" v-model="item.amount" class="text-center">
              </td>
               <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 74px;height:34px;text-align:right;">
                <input type="text" style="width:72px;text-align:right;" v-model="item.payAmount" class="text-center">
              </td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 70px;height:34px;text-align:right;">
                <input type="text" style="width:68px;text-align:right;" v-model="item.surcharge" class="text-center">
              </td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 80px;height:34px;text-align:right;">
                <input type="text" style="width:78px;text-align:right;" v-model="item.total" class="text-center">
              </td>
              <td style="border:1px solid #333;font-size:12px;font-family: '宋体';width: 86px;height:34px;">
                <input type="text" style="width:84px;" v-model="item.memo" class="text-center">
              </td>
            </tr>
          </table>
          <div style="text-align:right;margin-top:35px;color:#000;">应缴总额：{{total | toFixed2}}</div>
        </div>
      </div>
      <div class="jy-pt-bm">
        <h3 style="font-size:12px;font-family: '宋体';">备注：</h3>
        <h3 style="font-size:12px;font-family: '宋体';">如汇款请将款项汇至以下银行账户</h3>
        <table cellpadding="0" cellspacing="0">
          <tr>
            <td style="text-align:left;font-family: '宋体'; line-height:24px !important;font-size:12px;">收款户名：<span style="margin-left:10px;"></span>{{projectData.accountNames ? projectData.accountNames[num] : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align:left;font-family: '宋体';line-height:24px !important;font-size:12px;">银行名称：<span style="margin-left:10px;"></span>{{projectData.bankAccounts ? projectData.bankName[num] : '--'}}</td>
          </tr>
          <tr>
            <td style="text-align:left;font-family: '宋体';line-height:24px !important;font-size:12px;">银行账号：<span style="margin-left:10px;"></span>{{projectData.bankAccounts ? projectData.bankAccounts[num] : '--' | spceVal}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</section>

<script src="scripts/libs/jsPdf.debug.js" charset="utf-8"></script>
<script src="scripts/libs/html2canvas.min.js" charset="utf-8"></script>
<script src="modules/bill/scripts/YY_remind_print.js" charset="utf-8"></script>
